<!--编辑商品分类页  -->
<template>
    <div class="total">
        <div class="container">
            <el-form ref="form" :model="sizeForm" label-width="auto">

                <el-form-item label="属性名称" required>
                    <el-input v-model="sizeForm.name" />
                </el-form-item>

                <el-form-item label="商品类型">
                    <el-select v-model="sizeForm.productAttributeCategoryId">
                        <el-option v-for="item in options" :label="item.label" :value="item.value" />
                       
                    </el-select>
                </el-form-item>

                <el-form-item label="分类筛选样式">
                    <el-radio-group v-model="sizeForm.filterType">
                        <el-radio :label="0" size="large">普通</el-radio>
                        <el-radio :label="1" size="large">颜色</el-radio>
                    </el-radio-group>
                </el-form-item>


                <el-form-item label="能否进行检索">
                    <el-radio-group v-model="sizeForm.searchType">
                        <el-radio :label="0" size="large">不需要进行检索</el-radio>
                        <el-radio :label="1" size="large">关键字检索</el-radio>
                        <el-radio :label="2" size="large">范围检索</el-radio>
                    </el-radio-group>
                </el-form-item>


                <el-form-item label="商品关联属性">
                    <el-radio-group v-model="sizeForm.relatedStatus">
                        <el-radio :label="0" size="large">不关联</el-radio>
                        <el-radio :label="1" size="large">关联</el-radio>
                    </el-radio-group>
                </el-form-item>



                <el-form-item label="属性是否可选">
                    <el-radio-group v-model="sizeForm.selectType">
                        <el-radio :label="0" size="large">唯一</el-radio>
                        <el-radio :label="1" size="large">单选</el-radio>
                        <el-radio :label="2" size="large">多选</el-radio>
                    </el-radio-group>
                </el-form-item>


                <el-form-item label="属性值的录入方式">
                    <el-radio-group v-model="sizeForm.inputType">
                        <el-radio :label="0" size="large">手工录入</el-radio>
                        <el-radio :label="1" size="large">从列表中选择</el-radio>
                    </el-radio-group>
                </el-form-item>


                <el-form-item label="属性值可选值列表">
                    <el-input v-model="sizeForm.inputList" :rows="2" type="textarea" />
                </el-form-item>

                <el-form-item label="是否支持手动新增">
                    <el-radio-group v-model="sizeForm.handAddStatus">
                        <el-radio :label="0" size="large">不支持</el-radio>
                        <el-radio :label="1" size="large">支持</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="排序属性">
                    <el-input v-model="sizeForm.sort" />
                </el-form-item>

                <el-button type="primary" @click="onConfirm" style="margin-left:50px;">提交</el-button>

                <el-button type="text" @click="onReset" style="margin-left:50px;">重置</el-button>
            </el-form>
        </div>

    </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import * as api from "@/request/api"

let route = useRoute()
let router = useRouter()
const sizeForm = ref({
    filterType: 0,
    handAddStatus: 0,
    inputList: '',
    inputType: 0,
    name: '',
    productAttributeCategoryId: '',
    relatedStatus: 0,
    searchType: 0,
    selectType: 0,
    sort: 0,
    type: 0
})
const options = ref([])
//进入编辑页面后根据id请求数据
api.product.productCateAttrList().then((res) => {
    console.log(res);
    options.value = res.list.map((item) => {
        return {
            value: item.id,
            label: item.name
        }
    })

})





//编辑完成后点击确认
let onConfirm = async () => {
    let response = await api.product.productAttributeCreate(sizeForm.value)
    router.go(-1)
}

//编辑完成后点击重置
let onReset = () => {
    sizeForm.value = {
        filterType: 0,
        handAddStatus: 0,
        inputList: '',
        inputType: 0,
        name: '',
        productAttributeCategoryId: '',
        relatedStatus: 0,
        searchType: 0,
        selectType: 0,
        sort: 0,
        type: 0
    }

}















</script>


<style scoped>
.el-radio-group {
    margin-right: 12px;
}

:deep .el-input__wrapper {
    width: 200px !important;
}

.total {
    width: 100%;
    height: 100%;
}

.container {
    width: 720px;
    margin: 0 auto;
    padding: 30px;
    border: 1px solid #eee;
    margin-top: 30px;
}


:deep .el-input__wrapper {
    width: 530px;
}

:deep .el-input__inner {
    width: 530px;
}
</style>